<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <!-- 例一 -->
    <div class="flex bg-gray-100 h-[300px] w-[800px]">
      <div class="flex-item w-[100px] h-full flex items-center">Item 1</div>
      <div class="flex-item w-[100px] h-full flex items-center">Item 2</div>
      <div class="flex-item w-[100px] h-full flex items-center">Item 3</div>
      <div class="flex-item w-[100px] h-full flex items-center">Item 4</div>
    </div>
  </body>
  <script>
    /* 
    flexbox
    以下就是全部属性
    // 容器属性
    display: flex;
    // 设置主轴方向和换行  简写
    flex-flow: [ <flex-direction> || <flex-wrap> ]   
    // 设置主侧轴方向
    flex-direction: row | row-reverse | column | column-reverse;
    // 控制项目是否换行
    flex-wrap: nowrap | wrap | wrap-reverse;
    // 设置主轴对齐方式
    justify-content: flex-start | flex-end | center | space-between | space-around;
    // 设置侧轴单行的对齐方式
    align-items: stretch | flex-start | flex-end | center | baseline;
    // 设置侧轴多行的对齐方式
    align-content: stretch | flex-start | flex-end | center | space-between | space-around

    // 项目属性
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    flex-grow: <number>
    flex-shrink: <number>
    flex-basis: <length> | auto

    // 设置项目的对齐方式在侧轴上
    align-self: auto | stretch | flex-start | flex-end | center | baseline
    // 设置项目的顺序  越小的值越靠前
    order: <integer>
    
    */
    /* 
    常用的flex: 1;
    flex: 1; // 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%
    // flex-grow: 1; // 占据剩余空间
    // flex-shrink: 1; // 可以缩小
    // flex-basis: 0%; // 初始大小为0，允许占据
    */
  </script>
</html>
